<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        欢迎光临 Vue 开发的收银系统 水果店
        <table border="1" cellpadding="10" cellspacing="0">
            <tr>
                <th>苹果{{price}}￥/斤，折扣 {八}折</th>
            </tr>
            <tr>
                <td>输入你要购买的斤数<input type="number" v-model="count"></td>
            </tr>
            <tr>
                <td><button @click="check()">结账买单</button></td>
            </tr>
            <tr>
                <td>结账单：总价 {{total}}￥元 折后价:{{totalPrice}} 元 省了：{{total-totalPrice}}元
                </td>
            </tr>

        </table>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
    <script>
        const box = new Vue({
            el: '.box',
            data: {
                price: 10,
                count: 2,
                total: 0,
                totalPrice: 0
            },
            methods: {
                check() {
                    this.total = this.price * this.count,
                        this.totalPrice = this.price * 0.8 * this.count
                }
            },
            // computed: {
            //     total() {
            //         return this.price * this.count
            //     },
            //     totalPrice() {
            //         return this.price * 0.8 * this.count
            //     }
            // }
        })
    </script>
</body>

</html>